<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head"></head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <th:block th:replace="common/header"></th:block>
    <th:block th:replace="common/nav"></th:block>

    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                账号管理
                <small>账号管理新增/修改</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">账号管理</a></li>
                <th th:if="${xsUserDto.mode==0}">
                <li><a href="#">账号添加</a></li>
                </th>
                <th th:if="${xsUserDto.mode==1}">
                <li><a href="#">账号编辑</a></li>
                </th>
                <th th:if="${xsUserDto.mode==2}">
                <li><a href="#">账号查看</a></li>
                </th>
            </ol>
        </section>

        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <th th:if="${xsUserDto.mode==0}">
                            <h3 class="box-title">账号信息添加</h3>
                            </th>
                            <th th:if="${xsUserDto.mode==1}">
                            <h3 class="box-title">账号信息编辑</h3>
                            </th>
                            <th th:if="${xsUserDto.mode==2}">
                            <h3 class="box-title">账号信息查看</h3>
                            </th>
                        </div>
                        <!-- /.box-header -->
                        <!-- form start -->
                        <form class="form-horizontal" action="/xsUser/operate" method="post" >
                            <input type="hidden" id="userId" name="userId" th:value="${xsUserDto.userId}">
                            <input type="hidden" id="mode" name="mode" th:value="${xsUserDto.mode}">
                            <div class="box-body">

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">账号</label>

                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" id="userName" name="userName" th:value="${xsUserDto.userName}" placeholder="帐号名称" required="required" autocomplete="off" />
                                        <span id="span"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">手机号</label>
                                    <div class="col-sm-4">
                                        <input type="tel" class="form-control" id="phoneNum" name="phoneNum" th:value="${xsUserDto.phoneNum}" placeholder="手机号" required="required" autocomplete="off" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="11"/>
                                        <span id="phoneNumSpan"></span>
                                    </div>
                                </div>

                                <th:block th:if="${xsUserDto.mode==0}">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">登录密码</label>

                                        <div class="col-sm-4">
                                            <input type="password" class="form-control" name="passWord" placeholder="大于6个字符" required="required" autocomplete="off" />
                                        </div>
                                    </div>
                                </th:block>

                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer">
                                <th:block th:if="${xsUserDto.mode==0}">
                                <a href="list" class="btn btn-default">取 消</a>
                                <button id="submit" type="submit" class="btn btn-info pull-right submit">提 交</button>
                                </th:block>
                                <th:block th:if="${xsUserDto.mode==1}">
                                <a href="list" class="btn btn-default">取 消</a>
                                <button id="submit" type="submit" class="btn btn-info pull-right submit">提 交</button>
                                </th:block>
                                <th:block th:if="${xsUserDto.mode==2}">
                                <a href="list" class="btn btn-default">取 消</a>
                                <a href="list" class="btn btn-info pull-right">返 回</a>
                                </th:block>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>

                    <!-- /.box -->
                </div>
            </div>
            <!-- /.row -->
        </section>
    </div>

    <th:block th:replace="common/footer"></th:block>
</div>

<th:block th:replace="common/script"></th:block>
<script src="/plugins/Bootstrap-3-Typeahead-master/bootstrap3-typeahead.js"></script>

<script type="text/javascript">
    $(function() {
        usernameIsNull();
        $('#userName').change(function () {
            usernameIsNull();
        });
        phoneNumIsNull();
        $('#phoneNum').change(function () {
            phoneNumIsNull();
        });

    });

    function usernameIsNull() {
        if($('#userName').val() == '' || $('#userName').val() == null){
            $('#submit').attr('disabled',"true");
            $("#span").html('');
        }else{
            if($('#mode').val()=='0') {
                $.ajax({
                    url:"/xsUser/userNameIsNull?userName="+$('#userName').val()+"&userId="+$("#userId").val(),
                    type: "post",
                    dataType: "html",
                    success: function (json) {
                        var jsonObj = $.parseJSON(json);
                        if(jsonObj){
                            $("#span").html("<div style='color:green;'>可以创建</div>");
                            $('#submit').removeAttr("disabled"); //移除disabled属性
                        }else{
                            $("#span").html("<div style='color:red;'>用户名已存在！</div>");
                            $('#submit').attr('disabled',"true");//添加disabled属性
                        }
                    }
                });
            }

        }
    }

    function phoneNumIsNull() {
        if($('#phoneNum').val() == '' || $('#phoneNum').val() == null){
            $('#submit').attr('disabled',"true");
            $("#phoneNumSpan").html('');
        }else{
            if($('#mode').val()=='0') {
                $.ajax({
                    url:"/xsUser/phoneNumIsNull?phoneNum="+$('#phoneNum').val()+"&userId="+$("#userId").val(),
                    type: "post",
                    dataType: "html",
                    success: function (json) {
                        var jsonObj = $.parseJSON(json);
                        if(jsonObj){
                            $("#phoneNumSpan").html("<div style='color:green;'>可以创建</div>");
                            $('#submit').removeAttr("disabled"); //移除disabled属性
                        }else{
                            $("#phoneNumSpan").html("<div style='color:red;'>手机号已存在！</div>");
                            $('#submit').attr('disabled',"true");//添加disabled属性
                        }
                    }
                });
            }

        }
    }

</script>
</body>
</html>
